<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import { defineComponent } from "vue";
import RichEditor from "../components/RichEditor.vue";
import { Article } from "../model/Article";
import { useStore } from "../store";
import { ud4 } from "../utils/UUID";
import { CheckOutlined } from "@ant-design/icons-vue";
import { BBM } from "../model/BBM_info/bbm";
import servieApi from "../api/serve/servieApi";
import { data } from "../utils/TimeUtile";
import {
  plainToClass,
  plainToClassFromExist,
  instanceToPlain,
} from "class-transformer";
const store = useStore();
const article: Article = reactive({
  userId: store.state.userId,
  articleId: "",
  title: "",
  content: "",
  enabled: 1,
  envType: store.state.envType,
  version: store.state.version,
});

const htmlChange = (html: any) => {
  article.content = html;
};
const save = () => {
  const articleId = ud4();
  const t1 = new BBM.BBM_table();
  t1.name = "ARTICLE_INS";
  t1.addColumns(
    "USER_ID",
    "ARTICLE_ID",
    "TITLE",
    "CONTENT",
    "DATA",
    "PAGEVIEWS",
    "ENABLED",
    "ENV_TYPE",
    "VERSION",
    "ARCHIVE_MARK"
  );
  t1.addRow(
    article.userId,
    articleId,
    article.title,
    article.content,
    data(),
    1,
    1,
    article.envType,
    article.version,
    0
  );
  // 默认情况下，axios将 JavaScript 对象序列化为 JSON 
  const bbm = new BBM.BBM();
  bbm.addTable(t1);
  // const json = instanceToPlain(bbm);
  // console.log(json);
  // TODO: promise 需要then 处理
  servieApi
    .saveArticle(bbm)
    .then((resolve) => {
      console.log(resolve.status);
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>

<template>
  <a-input v-model:value="article.title" placeholder="标题" />
  <br />
  <br />
  <rich-editor @htmlChange="htmlChange" />
  <br />
  <br />
  <a-button type="primary" @click="save()">
    <template #icon><check-outlined /></template>
    保存
  </a-button>
  {{ article.content }}
  {{ article.title }}
  {{ article.userId }}
  {{ article.articleId }}
</template>
